<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
	 <meta charset="utf-8">
     <th:block th:replace="headfoot/head::head_ztree"></th:block>
</head>

<body>
    <!-- 根目录容器类 kj-form-container -->
    <div class="container-fluid kj-form-container">
        <!-- 表单内容类 kj-form-container-content -->
        <form id="queryForm" class="form-horizontal validate kj-form-container-content" role="form" method="post"
            action="/system/role/saveAndUp">
            <input type="hidden" id="id" name="id" th:value="${entity?.id}" />
            <!-- 表单上方按钮标题类 kj-form-title-button-bar -->
            <div class="from-group row has-feedback kj-form-title-button-bar">
                <div class="col-md-7">
                	<button type="button" class="action-ajax-form" id="realSave" style="display:none;"></button>
                    <button type="button" class="btn btn-default btn-sm kj-btn-save" onclick="beforeSave()">
                        <i class="iconfont icon-baocun"></i>&ensp;保存
                    </button>
                    <button type="button" class="btn btn-default btn-sm action-close-tab kj-btn-cancel">
                        <i class="iconfont icon-guanbi"></i>&ensp;取消
                    </button>
                </div>
                <div class="col-md-5">
                    <label class="col-md-6 control-label">负责人： <span
                            th:text="${entity?.createUserId != null ? entity?.createUserId : ''}"></span>
                    </label> <label class="control-label">创建时间： <span
                            th:text="${entity?.createDate != null ? #dates.format(entity?.createDate, 'yyyy-MM-dd HH:mm:ss') : #dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd HH:mm:ss')}"></span>
                    </label>
                </div>
            </div>

            <div class="card kj-form-container-card">
                <div class="card-header kj-form-container-card-header">
                    <h4>
                        <strong>角色详情</strong>
                    </h4>
                </div>
                <div class="card-body kj-form-container-card-body">
                    <div class="form-group">
                        <label class="col-md-2 control-label kj-form-container-content-label">角色名称</label>
                        <div class="col-md-3 validateDiv">
                            <input class="form-control input-sm kj-form-container-content-input" name="roleName"
                                type="text" data-rule-required="true" data-rule-rangelength="5,20"
                                data-rule-repeat="/system/role/checkRoleName" data-msg-repeat="角色名称重复"
                                autocomplete="off" placeholder="角色名称" th:value="${entity?.roleName}" />
                        </div>
                        <label class="col-md-2 control-label kj-form-container-content-label">角色代码</label>
                        <div class="col-md-3 validateDiv">
                            <input class="form-control input-sm kj-form-container-content-input" name="roleCode"
                                type="text" data-rule-required="true" data-rule-rangelength="5,20"
                                data-rule-repeat="/system/role/checkRoleCode" data-msg-repeat="角色代码重复"
                                autocomplete="off" placeholder="角色代码" th:value="${entity?.roleCode}" />
                        </div><!-- 这里可以自定义校验提示 data-msg-required="这里必填" data-msg-rangelength="长度在5到20之间" -->
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label kj-form-container-content-label">角色描述</label>
                        <div class="col-md-3">
                            <textarea class="form-control input-sm novalidate kj-form-container-content-textarea"
                                name="roleDescription" rows="6" placeholder="角色描述"
                                th:text="${entity?.roleDescription}"></textarea>
                        </div>
                        <label class="col-md-2 control-label kj-form-container-content-label">测试函数校验</label>
                        <div class="col-md-3">
                            <input class="form-control input-sm kj-form-container-content-input" type="text"
                                data-rule-customization="roleCustomizationFunction"
                                data-msg-customization="测试定制化校验函数提示消息" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="card kj-form-container-card">
                <div class="card-header kj-form-container-card-header">
                    <h4>
                        <strong>角色权限</strong>
                    </h4>
                </div>
                <div class="card-body kj-form-container-card-body">
                    <input id="resourceIdArr" name="resourceIdArr" type="hidden" />
                    <div class="from-group ">
                        <div class="right">
                            <ul
                            	class="ztree"
                            	th:data-url="${'/system/resource/resourceForm?roleId=' + entity?.id}"
                                data-setting='resourceTreeSetting'>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </form>

    </div>

    <script th:inline="javascript"><!-- thymleaf  内联用法 -->       

        function filter(treeId, parentNode, childNodes) {
        	if (!childNodes) return null;
        	childNodes = childNodes.data;
        	for (var i=0, l=childNodes.length; i<l; i++) {
        		if(childNodes[i].name){
        			childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        		}
        	}
        	return childNodes;
        }
        
		var resourceTreeSetting = {
			"async": {
					"enable": true,
					"url": "/system/resource/resourceForm?roleId=" + id.value,
					"autoParam": [
					              "id",
					              "name=n",
					              "level=lv"
								],
        			"otherParam": {
        				"otherParam": "zTreeAsyncTest",
        			},
        			"dataFilter": filter
        	},
        	"check": {
        		"enable": true,
        		"chkStyle": "checkbox",
        		"chkboxType": {
        			"Y": "ps",
        			"N": "ps"
        		}
        	}
        };
		
		function beforeSave() {
			var treeObj = $(".ztree").data("ztree");
	     	var nodes = treeObj.getCheckedNodes();
	     	if (nodes.length > 0) {
		     	var ids = new Array();
		     	nodes.forEach(function(node) {
		     		ids.push(node.id);
		     	});
		     	$("#resourceIdArr").val(ids.join());
	     	}
			$("#realSave").click();
		}
    </script>
    
    <th:block th:replace="headfoot/foot::form_ztree_foot">引用公共的foot</th:block>
    
    <script type="text/javascript">
        function roleCustomizationFunction(value, ele) {
            //自定义验证
            return value != null && value.length > 2;
        }
    </script>


</body>

</html>